<template>
    <template v-if="tableData.length">
        <el-card-collapse shadow="always" class="cardBox" :is-collapse="isTableShow"
            :card-body-dom="'elCardBodyRef' + refIndex" :button-dom="'button' + refIndex"
            :svg-arrow-dom="'svgArrow' + refIndex" :icon-dom="'iconDom' + refIndex">
            <template #header>
                <div class="cardBox-header flexR-SB-C" @click="handleChangeCollapse">
                    <div class="flexR-FS-C">
                        <div class="anime-div flexR-FS-C">
                            <button :id="'button' + refIndex" class="collapse-button">
                                <svg :id="'svgArrow' + refIndex" xmlns="http://www.w3.org/2000/svg" width="24"
                                    height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up">
                                    <polyline points="18 15 12 9 6 15" />
                                </svg>
                            </button>
                            <el-image :id="'iconDom' + refIndex" class="image" :src="imgIcon" fit="cover" />
                        </div>
                        <span>{{ title }}</span>

                        <el-button v-if="detailData.isEditable" class="icon" :icon="Plus"
                            @click.stop="handleAddContract({}, '1')" />
                    </div>
                    <div v-if="tableData.length" class="flexR-FS-C">
                        <div class="total">
                            动态立项合计：<count-to-number :number="dtlxTotal" />
                        </div>
                    </div>
                </div>
            </template>

            <el-table ref="tableRef" class="tableBox" :data="tableData"
                :header-cell-class-name="data => setHeaderCellClass(data, 'table-header')" :row-class-name="setRowClass"
                :cell-style="cellStyle" :cell-class-name="setHeaderCellClass" row-key="uuid">
                <el-table-column prop="date" align="center" width="20">
                    <template #default="scope">
                        <el-tooltip effect="dark" :content="getLizhuStr(scope.row)" placement="left-start">
                            <p class="lxsyzl">&nbsp;&nbsp;&nbsp;</p>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column prop="no" align="center" label="序号" class-name="asfasc" />
                <el-table-column prop="lxmc" label="合同名称">
                    <template #default="scope">
                        <el-popover placement="top-start" :width="300" :show-after="1000" :content="scope.row.lxmc">
                            <template #reference>
                                <p class="neirong">
                                    {{ scope.row.lxmc }}
                                </p>
                            </template>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column prop="zygcl" label="主要工程量">
                    <template #default="scope">
                        <el-popover placement="top-start" :width="300" :show-after="1000" :content="scope.row.zygcl">
                            <template #reference>
                                <p class="neirong">
                                    {{ scope.row.zygcl }}
                                </p>
                            </template>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column prop="zghtjwy" label="初始立项/暂估合同价">
                    <template #default="scope">
                        <span>{{ getFloat(scope.row.zghtjwy, 4) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="dtjewy" label="动态立项金额">
                    <template #default="scope">
                        <span>{{ getFloat(scope.row.dtjewy, 4) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="zzyq" label="资质要求" />

                <el-table-column prop="gzfwjnr" label="工作范围及内容">
                    <template #default="scope">
                        <el-popover placement="top-start" :width="300" :show-after="1000" :content="scope.row.gzfwjnr">
                            <template #reference>
                                <p class="neirong">
                                    {{ scope.row.gzfwjnr }}
                                </p>
                            </template>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column prop="cgxs" label="采购形式">
                    <template #default="scope">
                        <span>{{ cgxsOptions[scope.row.cgxs] }}</span>
                    </template>
                </el-table-column>

                <el-table-column prop="jhqdrq" label="计划签订日期">
                    <template #default="scope">
                        <span>{{ formatDate(scope.row.jhqdrq).fmt6 }}</span>
                    </template>
                </el-table-column>

                <el-table-column v-if="detailData.isShenhe" prop="contractStatus" label="合同状态" align="center">
                    <template #default="scope">
                        <span>{{ contractStatus[scope.row.contractStatus] }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="lxsysm" label="签订事由">
                    <template #default="scope">
                        <el-popover placement="top-start" :width="300" :show-after="1000" trigger="hover"
                            :content="scope.row.lxsysm">
                            <template #reference>
                                <p class="neirong">
                                    {{ scope.row.lxsysm }}
                                </p>
                            </template>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column prop="caozuo" fixed="right" label="操作" align="center">
                    <template #default="scope">
                        <el-tooltip v-if="scope.row.isEditable" effect="dark" content="编辑" placement="top-start">
                            <el-button class="circel-btn" style="color: #666;" :icon="Setting" circle
                                @click="handleAddContract(scope.row, '2')" />
                        </el-tooltip>

                        <el-tooltip v-if="scope.row.isPlugable" effect="dark" content="补充" placement="top-start">
                            <el-button class="circel-btn" style="color: #666;" :icon="Setting" circle
                                @click="handleAddContract(scope.row, '2')" />
                        </el-tooltip>

                        <el-tooltip v-if="scope.row.isDeletable" effect="dark" content="删除" placement="top-start">
                            <el-button class="circel-btn" style="color: #ff3141;" :icon="Delete" circle
                                @click="handleDelete(scope.row, detailData.uuid)" />
                        </el-tooltip>

                        <el-tooltip v-if="scope.row.isOffsetable" effect="dark" content="销项" placement="top-start">
                            <el-button class="circel-btn" style="color: #ff3141;" :icon="Delete" circle
                                @click="handleAddContract(scope.row, '4')" />
                        </el-tooltip>

                        <el-tooltip v-if="getButtonShow(scope.row, '发起备案')" effect="dark" content="发起备案"
                            placement="top-start">
                            <!-- <span class="beian iconfont icon-beian" style="color: #666;" @click="handleBeian"></span> -->
                            <el-button class="circel-btn iconfont icon-beian beian" style="color: #666;" circle
                                @click="handleBeian" />
                        </el-tooltip>

                        <el-tooltip v-if="getButtonShow(scope.row, '发起选用')" effect="dark" content="发起选用"
                            placement="top-start">
                            <el-button class="circel-btn" style="color: #666;" :icon="Right" circle
                                @click="handleXuanyong" />
                        </el-tooltip>

                        <el-tooltip v-if="scope.row.isReadOnly" effect="dark" content="查看" placement="top-start">
                            <el-button class="circel-btn" style="color: #666;" :icon="View" circle
                                @click="handleAddContract(scope.row, '5')" />
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
        </el-card-collapse>
    </template>

    <template v-else>
        <div class="cardBox-no">
            <div class="cardBox-header flexR-FS-C">
                <el-image class="image" :src="imgIcon" fit="cover" />
                <span>{{ title }}</span>
                <el-button v-if="detailData.isEditable" class="icon" :icon="Plus"
                    @click.stop="handleAddContract({}, '1')" />
            </div>
        </div>
    </template>

    <add-contract ref="addContractRef" :title="title" @success="handleSuccess" />
</template>

<script setup>
import AddContract from './addContract.vue'
import commonData from '@/hooks/commonData'
import { cgxsOptions, contractStatus, lxsyzlOptions } from '@/components/common'
import { formatDate } from '@/utils/time'
import { add } from '@/utils/calculate'
import cardBoxData from './cardBoxData'
import { getFloat } from '@/utils'

const { setContractData, Plus, Delete, Setting, Right, View } = commonData()

const emit = defineEmits(['success'])
const detailData = inject('detailData')
const props = defineProps({
    title: {
        type: String,
        default: ''
    },
    imgIcon: {
        type: String,
        default() {
            return ''
        }
    },
    tableData: {
        type: Array,
        default() {
            return []
        }
    },
    refIndex: {
        type: Number,
        default() {
            return 0
        }
    }
})

const { addContractRef, handleChangeCollapse, isTableShow, handleAddContract, handleDelete } = cardBoxData(props, handleSuccess)

const tableRef = ref(null)
const dtlxTotal = ref(0)

const statusColor = {
    // border颜色、字体颜色、背景颜色、提示文字
    0: ['#ffffff', '', '#ffffff', '新增'], // 新增-未审核
    1: ['#ebef22', '', '#feffd5', '新增'], // 新增-已审核
    2: ['#90EE90', '', '#d4f2d4', '补充'], // 补充
    3: ['#94C474', '', '#e5f2da', '其他'], // 其他
    4: ['#ffffff', '#858585', '#ffffff', '销项'], // 销项
    5: ['#04B578', '', '#ffffff', '立项通过'] // 归档
}

// 做一个不同按钮的展示条件判断
function getButtonShow(row, buttonName) {
    const isEditable = detailData.value.isEditable
    let show = false
    switch (buttonName) {
        case '编辑':
            // 有操作权限 并且 不是审核中 并且 不是销项 并且 不是归档
            show = isEditable && row.lxStatus !== 1 && row.lxsyzl !== 4 && row.lxStatus !== 9
            break
        case '补充':
            // 有操作权限 并且 不是审核中 并且 不是销项 并且 已归档
            show = isEditable && row.lxStatus !== 1 && row.lxsyzl !== 4 && row.lxStatus == 9
            break
        case '删除':
            // 有操作权限 并且 不是审核中 并且 不是归档
            show = isEditable && row.lxStatus !== 1 && row.lxStatus !== 9
            break
        case '销项':
            // 有操作权限 并且 不是审核中 并且 已归档
            show = isEditable && row.lxStatus !== 1 && row.lxStatus == 9
            break
        case '发起备案':
            // 已归档 并且 不是审核中 并且 属于技术服务合同、其他合同
            show = row.lxStatus == 9 && row.lxStatus !== 1 && (row.lxlx == 5 || row.lxlx == 6)
            break
        case '发起选用':
            // 已归档 并且 不是审核中 并且 不属于技术服务合同与其他合同
            show = row.lxStatus == 9 && row.lxStatus !== 1 && !(row.lxlx == 5 || row.lxlx == 6)
            break
        case '查看':
            // 已销项 或者 无操作权限
            show = (row.lxsyzl == 4 || !isEditable)
            break
    }
    return show
}

function getLizhuStr(row) {
    const nowStatus = initNowStatus(row)
    return statusColor[nowStatus][3]
}

function setRowClass({ row }) {
    if (row.lxsyzl == 4) {
        return 'disable-row'
    }
    return 'table-row'
}

function cellStyle({ row, columnIndex }) {
    const style = {}
    const nowStatus = initNowStatus(row)

    if (columnIndex == 0) {
        const boederColor = statusColor[nowStatus][0]
        style['border-left'] = `10px solid ${boederColor}`
    }
    if (!row.isFirstSubmit && columnIndex !== 13) {
        const color = statusColor[nowStatus][1]
        const bgColor = statusColor[nowStatus][2]
        style['color'] = color
        style['background-color'] = bgColor
    }

    return style
}

function initNowStatus(row) {
    let nowStatus = ''
    if (detailData.value.isShenhe) {
        if (row.lxsyzl == 4) {
            // 销项
            nowStatus = row.lxsyzl
            return nowStatus
        }

        if (row.lxStatus == 9) {
            // 归档
            nowStatus = 5
        } else {
            if (row.lxParentUuid) {
                // 补充
                nowStatus = 2
            } else {
                // 新增-审核
                nowStatus = 1
            }
        }
    } else {
        if (!row.lxParentUuid) {
            // 新增-未审核
            nowStatus = 0
        }
    }
    return nowStatus
}

// { row, columnIndex }
function setHeaderCellClass({ row, column }, name) {
    const property = column.property
    const classMap = {
        'date': 'width30',
        'no': 'width60',
        'lxmc': 'width150',
        // 'zygcl': 'width150',
        'zghtjwy': 'width130',
        'dtjewy': 'width130',
        'zzyq': 'width130',
        'gzfwjnr': 'width200',
        'cgxs': 'width80',
        'jhqdrq': 'width110',
        // 'lxsysm': 'width150',
        'contractStatus': 'width80',
        'caozuo': detailData.value.isEditable ? 'width160' : 'width110'
    }

    let className = name || ''
    if (classMap[property]) {
        className += ` ${classMap[property]}`
    }
    if (row.lxsyzl == 4) {
        className += ' del_line'
    }

    return className
}

// 初始化页面table宽度
function initTableWidth() {
    setTimeout(() => {
        var headerElements = document.querySelectorAll('.el-table__header')
        var bodyElements = document.querySelectorAll('.el-table__body');

        [...headerElements, ...bodyElements].forEach(element => {
            // 在 'el-table__header' 元素下查找 'colgroup' 标签
            var colgroupElement = element.querySelector('colgroup')
            var colElements = colgroupElement.querySelectorAll('col')
            colElements.forEach(dom => {
                dom.style.width = 'auto'
            })
        })
    }, 300)
}

watch(() => props.tableData, data => {
    if (data.length) {
        const list = [0]
        data.forEach(el => {
            if (!(el.lxsyzl == 4 && el.lxStatus == 9)) {
                list.push(el.lxsyzl === 4 ? -el.dtjewy : el.dtjewy)
            }
        })
        dtlxTotal.value = add.apply(null, list)
        initTableWidth()
    }
}, {
    deep: true,
    immediate: true
})

function handleBeian() {
    // 提示功能待开发
    ElMessage({
        message: '发起备案功能待开发',
        type: 'warning'
    })
}

function handleXuanyong() {
    // 提示功能待开发
    ElMessage({
        message: '发起选用功能待开发',
        type: 'warning'
    })
}

function handleSuccess() {
    emit('success')
}
</script>

<style scoped lang="scss">
@import "./style.scss";

:deep(.el-table__body-wrapper::-webkit-scrollbar) {
    width: 10px;

    /* 滚动条宽度 */
    height: 10px;

    /* 滚动条高度 */
}

/* 定义滚动条轨道 内阴影+圆角 */
:deep(.el-table__body-wrapper::-webkit-scrollbar-track) {
    box-shadow: 0 1px 3px #071e4a inset;

    /* 滚动条的背景区域的内阴影 */
    border-radius: 10px;

    /* 滚动条的背景区域的圆角 */
    background-color: #071e4a;

    /* 滚动条的背景颜色 */
}

/* 定义滑块 内阴影+圆角 */
:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
    box-shadow: 0 1px 3px #00a0e9 inset;

    /* 滚动条的内阴影 */
    border-radius: 10px;

    /* 滚动条的圆角 */
    background-color: #00a0e9;

    /* 滚动条的背景颜色 */
}

.cardBox {
    margin-top: 10px;

    .tableBox {
        margin-top: 10px;

        .statusBackColor {
            // width: 100%;
            height: 100%;
        }

        :deep(.table-header) {
            // height: 54px;
            background: #f7fafb !important;
            font-size: 13px;
        }

        :deep(.table-row) {
            font-size: 13px;
            color: #000;
            border-bottom: 1px solid #f0f2f5;

            .color-money {
                color: #ff6430;
            }
        }

        :deep(.disable-row) {
            font-size: 14px;
            border-bottom: 1px solid #f0f2f5;
            position: relative;
            color: #999;
        }

        /* :deep(.disable-row::after) {
            content: no-open-quote;
            position: absolute;
            top: 51%;
            left: 0;
            width: 100%;
            border-bottom: 1px solid #858585;
            z-index: 100;
        } */
        .lxsyzl {
            width: 20px;
            height: 100%;
            position: absolute;
            top: 0;
            left: -10px;
            cursor: pointer;
        }

        .neirong {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            cursor: pointer;
        }

        .circel-btn {
            width: 32px;
            height: 32px;
        }

        .beian {
            font-size: 17px;
        }
    }
}

.cardBox-header {
    .anime-div {
        position: relative;

        .collapse-button {
            appearance: none;
            background: transparent;
            border-radius: 30px;
            border: 0;
            cursor: pointer;
            height: 30px;
            opacity: 0;
            outline: none;
            position: relative;
            width: 30px;
            z-index: 1;

            &::after {
                background: #efeff0;
                border-radius: 40px;
                content: "";
                height: 35px;
                left: 50%;
                opacity: 0;
                position: absolute;
                top: 50%;
                transform: translate(-50%, -50%);
                transition: all 0.2s ease-out;
                width: 35px;
            }

            &:hover::after {
                opacity: 1;
            }

            svg {
                color: #9c9c9e;
                left: 50%;
                position: absolute;
                stroke-width: 3;
                top: 50%;
                transform: translate(-50%, -50%);
                z-index: 2;
            }
        }

        .image {
            width: 32px;
            position: absolute;
        }
    }

    span {
        font-size: 15px;
        color: rgb(0 0 0 / 90%);
        margin: 0 10px 0 5px;
    }

    .icon {
        font-size: 12px;
        color: #04b578;
        padding: 0 10px;
        border-radius: 4px;
        height: 23px;
        border: 1px solid #04b578;
    }

    .total {
        font-size: 15px;
        color: rgb(0 0 0 / 94%);

        span {
            font-size: 18px;
        }
    }

    .arrowIcon {
        margin-left: 10px;
        margin-top: 10px;
        transition: transform 0.3s;
        transform: rotate(90deg);
    }

    .rotateZ {
        transform: rotate(90deg);
    }

    .rotateZ2 {
        transform: rotate(-90deg);
    }
}

.cardBox-no {
    display: inline-block;
    padding: 20px;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: rgb(217 217 217) 0 20px 50px 0;
    margin-top: 20px;
    margin-right: 20px;

    .image {
        width: 35px;
    }
}
</style>

<style>
.cardBox .el-table td.el-table__cell div {
    line-height: 24px;
}

.del_line::after {
    content: no-open-quote;
    position: absolute;
    top: 51%;
    left: 0;
    width: 100%;
    border-bottom: 1px solid #999;
}
</style>
